<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./layui.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: url('https://th.bing.com/th/id/R.0dee2228031e4ef5b03d0c5734aef866?rik=BD%2bnjbFbllVmEQ&riu=http%3a%2f%2fimg.zcool.cn%2fcommunity%2f01cf02554336f10000019ae9df1dad.jpg%403000w_1l_2o_100sh.jpg&ehk=zvcYgjHlqK2U2x9ploUbmiBIk7BewUd6lyA0AIswegQ%3d&risl=&pid=ImgRaw&r=0') no-repeat center center fixed;
            background-size: cover;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            background-color: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            max-width: 300px;
            width: 100%;
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        .input-container {
            position: relative;
        }

        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 10px;
            margin: 8px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .eye-icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }

        input[type="submit"] {
            width: 100%;
            padding: 10px;
            margin: 8px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            background-color: #4caf50;
            color: white;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }

        .error {
            color: red;
            font-size: 14px;
            margin-top: 5px;
            text-align: center;
        }

        .switch {
            text-align: center;
            margin-top: 10px;
        }

        .switch a {
            color: #4caf50;
            text-decoration: none;
        }

        .switch a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="container" id="loginContainer">
        <h2>登录</h2>
        <form id="loginForm">
            <input type="text" id="loginUsername" placeholder="用户名" required>
            <div class="input-container">
                <input type="password" id="loginPassword" placeholder="密码" required>
                <span class="eye-icon" id="loginEyeIcon">&#128065;</span>
            </div>
            <input type="submit" value="登录">
        </form>
        <div id="loginError" class="error"></div>
        <div class="switch"><a href="#" id="switchToRegister">注册账号</a></div>
    </div>
    <div class="container" id="registerContainer" style="display: none;">
        <h2>注册</h2>
        <form id="registerForm">
            <input type="text" id="registerUsername" placeholder="用户名" required>
            <div class="input-container">
                <input type="password" id="registerPassword" placeholder="密码" required>
                <span class="eye-icon" id="registerEyeIcon">&#128065;</span>
            </div>
            <div class="input-container">
                <input type="password" id="registerConfirmPassword" placeholder="确认密码" required>
                <span class="eye-icon" id="registerConfirmEyeIcon">&#128065;</span>
            </div>
            <input type="submit" value="注册">
        </form>
        <div id="registerError" class="error"></div>
        <div class="switch"><a href="#" id="switchToLogin">立即登录</a></div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const loginContainer = document.getElementById("loginContainer");
            const registerContainer = document.getElementById("registerContainer");
            const switchToRegister = document.getElementById("switchToRegister");
            const switchToLogin = document.getElementById("switchToLogin");
            const loginForm = document.getElementById("loginForm");
            const loginUsername = document.getElementById("loginUsername");
            const loginPassword = document.getElementById("loginPassword");
            const loginError = document.getElementById("loginError");
            const registerForm = document.getElementById("registerForm");
            const registerUsername = document.getElementById("registerUsername");
            const registerPassword = document.getElementById("registerPassword");
            const registerConfirmPassword = document.getElementById("registerConfirmPassword");
            const registerError = document.getElementById("registerError");
            const loginEyeIcon = document.getElementById("loginEyeIcon");
            const registerEyeIcon = document.getElementById("registerEyeIcon");
            const registerConfirmEyeIcon = document.getElementById("registerConfirmEyeIcon");
            //切换到注册表单
            switchToRegister.addEventListener("click", function (e) {
                e.preventDefault();
                loginContainer.style.display = "none";
                registerContainer.style.display = "block";
            });
            // 切换到登录表单
            switchToLogin.addEventListener("click", function (e) {
                e.preventDefault();
                registerContainer.style.display = "none";
                loginContainer.style.display = "block";
            });
            //切换密码可见性
            function togglePasswordVisibility(input) {
                if (input.type === "password") {
                    input.type = "text";
                } else {
                    input.type = "password";
                }
            }
            loginEyeIcon.addEventListener("click", function () {
                togglePasswordVisibility(loginPassword);
            });
            registerEyeIcon.addEventListener("click", function () {
                togglePasswordVisibility(registerPassword);
            });
            registerConfirmEyeIcon.addEventListener("click", function () {
                togglePasswordVisibility(registerConfirmPassword);
            });
            //登录表单提交
            loginForm.addEventListener("submit", function (e) {
                e.preventDefault();
                if (loginUsername.value.trim() === "" || loginPassword.value.trim() === "") {
                    loginError.textContent = "请填写所有字段。";
                } else {
                    loginError.textContent = "";
                    window.location.href = "购物车.html";
                }
            });
            //注册表单提交
            registerForm.addEventListener("submit", function (e) {
                e.preventDefault();
                if (registerUsername.value.trim() === "" || registerPassword.value.trim() === "" || registerConfirmPassword.value.trim() === "") {
                    registerError.textContent = "请填写所有字段。";
                } else if (registerPassword.value !== registerConfirmPassword.value) {
                    registerError.textContent = "密码不匹配。";
                } else {
                    registerError.textContent = "";
                    alert("注册成功！");
                }
            });
        });
    </script>
</body>

</html>